<template>
  <a-tree-select
    v-model="data"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    placeholder="请选择商品类别"
    :replace-fields="{ title: 'name', key: 'id', value: 'id' }"
    @select="handleSelected"
    @change="handleChange"
    show-search
    :filterTreeNode="filterTreeNode"
  >
  </a-tree-select>
</template>

<script>
import { getCommodityCategoryList } from '@/api/commodity'

export default {
  name: 'CommodityCategorySelection',
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  watch: {
    value: {
      handler: function (val) {
        this.data = val
      },
      immediate: true
    }
  },
  data () {
    return {
      data: undefined,
      treeData: []
    }
  },
  created () {
    this.onLoadData()
  },
  methods: {
    onLoadData () {
      return getCommodityCategoryList().then(res => {
        res.forEach(data => {
          data.selectable = false
        })
        this.treeData = res
      })
    },
    handleSelected (value, node, extra) {
      this.$emit('input', value)
    },
    handleChange (value) {
      this.$emit('change', value)
    },
    filterTreeNode (input, treeNode) {
      return treeNode.data.props.title.split(input).length > 1
    }
  }
}
</script>

<style scoped>

</style>
